<template>
  <el-autocomplete
    v-model="aaf216"
    style="width: 500px"
    :debounce="1000"
    :value-key="'aaf216'"
    placeholder="银行网点编号、银行网点名称"
    :disabled="selfDis"
    :clearable="true"
    :fetch-suggestions="bankBaseInfoSearch"
    :loading="loading"
    :custom-item="true"
    :popper-append-to-body="true"
    @select="bankBaseInfoSelect"
    @change="fnHiddenSelectOptions"
    @blur="bankBaseInfoBlur"
    @focus="isFocus = true"
  >

    <template #default="{ item }">
      <div class="rpc-row" style="height: 30px;">
        <span class="rpc-text" :class="{'is-event-num': item.index % 2 == 0 }" style="width: 60%">{{ item.aaf217 }}</span>
        <span class="rpc-text" :class="{'is-event-num': item.index % 2 == 0 }" style="width: 20%">{{ item.aaf002 }}</span>
        <span class="rpc-text" :class="{'is-event-num': item.index % 2 == 0 }" style="width: 20%">{{ item.aaf216 }}</span>
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
import bankApi from './rpc'
export default {
  name: 'BankRpc',
  data() {
    return {
      aaf216: '',
      selfDis: false,
      isFocus: false,
      isShowUnit: true,
      loading: false,
      bankData: []
    }
  },
  methods: {
    bankBaseInfoSearch(query, cb) {
      // 模拟搜索数据
      setTimeout(() => {
        this.loading = true
        this.getSearchResults(query, cb) // 用你自己的逻辑获取数据
        // cb(results)
        this.loading = false
      }, 500)
    },
    restAaf216(item) {
      this.aaf216 = item
    },
    getSearchResults(query, cb) {
      // 这里可以模拟返回一个搜索结果数组
      // 后台查询数据
      if (query === null || query === '' || query === undefined) {
        return []
      }
      bankApi.getbankInfo({ aaf216: query, aaf002: query, aaf217: query }).then(res => {
        this.bankData = res
        this.$nextTick(() => {
          cb(res)
        })
      })
      return this.bankData
    },
    bankBaseInfoSelect(item) {
      // 选择某项后的回调处理
      console.log('选中项:', item)
      this.$emit('bankRpcCallBack', item)
    },
    fnHiddenSelectOptions() {
      // 处理隐藏选项的逻辑
    },
    bankBaseInfoBlur() {
      // 失去焦点的处理逻辑
    }
  }
}
</script>

<style scoped>
.rpc-row {
  display: flex;
  justify-content: space-between;
}
.rpc-text {
  display: inline-block;
  padding: 0 10px;
}
.is-event-num {
  background-color: #f5f5f5;
}
</style>
